<template>
  <div class="zz-inverting-storages-list-box">
    <div class="box-top">
      <div class="check-all-box">
        <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onAllChange">{{checkAll?'全部取消':'全部选择'}}</a-checkbox>
      </div>
      <div class="checked-des auto-wrap">已选择库位数：<a style="cursor:default;">{{checkedNum}}</a></div>
    </div>
    <div class="list-group">
      <div class="lsit-item" v-for="(item,index) in list" :key="'lsit-item-'+index">
        <a-checkbox :checked="item.checked" @change="onSingleChange(index,item,$event)" /><a class="space-link" @click.stop="openDetail(item)">{{item.placecode}}</a>
      </div>
    </div>
    
    <detail-drawer :visible.sync="detailVisible" :row="detailRow" />
  </div>
</template>

<script>
import DetailDrawer from './DetailDrawer.vue'
export default {
  name:'zzInvertingStorageListBox',
  components:{DetailDrawer},
  data(){
    return {
      checkAll:false,
      indeterminate:false,
      list:[],
      checkedNum:0,
      detailVisible:false,
      detailRow:{}
    }
  },
  methods:{
    setList(arr){
      this.list = [...arr]
      this.restCheckAll()
    },
    emptyChoosen(){
      this.restCheckAll()
      this.linkSetCheckList(false)
    },
    restCheckAll(){
      this.checkAll = false
      this.indeterminate = false
      this.checkedNum = 0
    },
    onSingleChange(index,obj,e){
      obj.checked = e.target.checked
      if (obj.checked) {
        this.checkedNum++;
      } else {
        this.checkedNum--;
      }
      this.linkSetCheckAll()
    },
    onAllChange(e){
      let _temp = e.target.checked
      if (_temp) {
        this.checkAll = true
        this.checkedNum = this.list.length
      } else {
        this.checkAll = false
        this.checkedNum = 0
      }
      this.indeterminate = false
      this.linkSetCheckList(_temp)
    },
    linkSetCheckAll(){
      let c = 0 , n = this.list.length;
      this.list.forEach((listitem)=>{
        if (listitem.checked) {
          c++
        }
      })
      if (c===0) {
        this.checkAll = false;
        this.indeterminate = false
      } else if (c===n) {
        this.checkAll = true;
        this.indeterminate = false
      } else {
        this.checkAll = false;
        this.indeterminate = true
      }
    },
    linkSetCheckList(__empty) {
      this.list.forEach((listitem)=>{
        listitem.checked = __empty
      })
    },
    openDetail(obj){
      this.detailRow = obj
      this.detailVisible = true;
    },
    getChoosen(){
      let arr = [];
      this.list.forEach((listitem)=>{
        if (listitem.checked) {
          arr.push(listitem)
        }
      })
      return arr
    }
  }
}
</script>

<style lang="less" scoped>
.zz-inverting-storages-list-box {
  height:100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  .box-top {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #dcdcdc;
    .check-all-box{
      flex-shrink: 0;
      padding: 0 12px;
    }
    .checked-des{
      flex-grow: 1;
      width: 1px;
      padding: 6px 6px 6px 0;
    }
  }
  .list-group{
    height: 1px;
    flex-grow: 1;
    overflow: auto;
    .lsit-item{
      border-bottom: 1px dashed #dcdcdc;
      padding: 6px 12px;
      .space-link{
        margin-left: 8px;
      }
      &:last-child{
        border-bottom: 0;
      }
    }
  }
}
</style>